<template>
     <div class="content">
          <!-- 路由组件出口的位置 -->
          <router-view v-slot="{ Component }">
               <transition name="fade" mode="out-in">
                    <keep-alive>
                         <component
                              :is="Component"
                              v-if="$route.meta.keepAlive && flag"
                              :key="$route.fullPath"
                         />
                    </keep-alive>
               </transition>
               <transition name="fade" mode="out-in">
                    <component
                         :is="Component"
                         v-if="!$route.meta.keepAlive && flag"
                         :key="$route.fullPath"
                    />
               </transition>
          </router-view>
     </div>
</template>

<script setup lang="ts">
import { watch, ref, nextTick } from 'vue' // 启用被注释的导入
import useLayOutSettingStore from '@/store/modules/setting'
let layOutSettingStore = useLayOutSettingStore()

// 控制当前组件是否销毁重建
let flag = ref(true)

// 监听仓库内部数据是否发生变化,如果发生变化，说明用户点击过刷新按钮
watch(
     () => layOutSettingStore.refsh,
     () => {
          // 点击刷新按钮:路由组件销毁
          flag.value = false
          nextTick(() => {
               flag.value = true
          })
     },
)
</script>

<script lang="ts">
export default {
     name: 'Main',
}
</script>

<style scoped>
.content {
     width: 100%;
     height: 100%;
     border-radius: 5px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     gap: 10px;
}

/* 进入动画 */
.fade-enter-from {
     opacity: 0;
     transform: scale(0.95);
}

.fade-enter-active {
     transition: all 0.3s ease;
}

.fade-enter-to {
     opacity: 1;
     transform: scale(1);
}

/* 离开动画 */
.fade-leave-from {
     opacity: 1;
     transform: scale(1);
}

.fade-leave-active {
     transition: all 0.3s ease;
}

.fade-leave-to {
     opacity: 0;
     transform: scale(0.95);
}
</style>
